<template>
  <div class="echartsWrap">
    <div :id="echartId" class="echart" />
  </div>
</template>

<script>
import MixinEchart from '@/views/components/MixinEchart'
export default {
    name: 'Echart',
    mixins: [MixinEchart],
    props: {

    },
    data() {
        return {
            echartId: 'echarts',
            myChart: {}
        }
    },
    created() {
        this.getData()
    },
    mounted() {

    },

    methods: {
        async getData() {
            this.isLoading = true
            setTimeout(() => {
                this.echartData = {
                    data: ['10', '13', '16', '20', '22', '16', '10'],
                    data2: ['8', '10', '10', '18', '5', '3', '2'],
                    xName: ['10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7']
                }
                this.isLoading = false
                this.setOptions()
            }, 1000)
        },
        setOptions() {
            var option = {}
            option = {
                title: {
                    text: ''
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '5%',
                    top: '25%',
                    containLabel: true
                },
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    backgroundColor: this.tooltipBgColor,
                    borderColor: this.tooltipBorderColor,
                    padding: [5, 10],
                    textStyle: { // 提示框浮层的文本样式。
                        color: this.axisColor,

                        fontSize: this.fontSize
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['实例1', '实例2'],
                    itemWidth: this.fontSize * 1,
                    itemHeight: this.fontSize * 0.5,
                    right: '0',
                    top: '0',
                    textStyle: {
                        color: this.axisColor,
                        fontSize: this.fontSize
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.echartData.xName,
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: this.xLineColor,
                                width: 1// 这里是为了突出显示加上的
                            }
                        },
                        axisTick: {
                            length: 2,
                            alignWithLabel: true
                        },
                        offset: 5,
                        axisLabel: {
                            show: true,
                            color: this.axisColor,
                            textStyle: {
                                color: this.axisColor,
                                fontSize: this.fontSize * 0.8
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '次数',
                        nameLocation: 'end',
                        minInterval: 1,
                        nameGap: 3,
                        nameTextStyle: {
                            align: 'left',
                            padding: [0, 0, this.fontSize, -this.fontSize],
                            fontSize: this.fontSize,
                            color: this.axisColor
                        },

                        axisTick: {
                            show: false
                        },

                        axisLine: {
                            onZero: false,
                            show: false

                        },
                        offset: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                // 使用深浅的间隔色
                                color: ['rgba(112, 112, 112, 0.5)']
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: this.axisColor,
                            textStyle: {
                                color: this.axisColor,
                                fontSize: this.fontSize * 0.8
                            }
                        }
                    }

                ],
                series: [
                    {
                        name: '实例1',
                        type: 'line',
                        // yAxisIndex: 1,
                        symbol: 'circle',
                        smooth: true,
                        symbolSize: this.fontSize * 0.5,
                        lineWidth: 2,
                        itemStyle: {
                            color: '#FF631F',
                            normal: {
                                color: '#FF631F',
                                areaStyle: { type: 'default', color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#FF631F' },
                                        { offset: 0.5, color: '#803210' },
                                        { offset: 1, color: '#2B2B2B' }
                                    ]
                                ) },

                                borderColor: '#FF631F', // 拐点边框颜色
                                borderWidth: 0.5// 拐点边框大小
                            }

                        },
                        data: this.echartData.data
                    },
                    {
                        name: '实例2',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: this.fontSize * 0.5,
                        lineWidth: 2,
                        itemStyle: {
                            color: '#9F6AFD',
                            normal: {
                                color: '#9F6AFD',
                                areaStyle: { type: 'default', color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#615282' },
                                        { offset: 0.5, color: '#354D85' },
                                        { offset: 1, color: '#1E3562' }
                                    ]
                                ) },

                                borderColor: '#9F6AFD', // 拐点边框颜色
                                borderWidth: 0.5// 拐点边框大小
                            }

                        },
                        data: this.echartData.data2
                    }

                ]
            }
            this.echartInstance.setOption(option)
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
    .echartsWrap{
        width: 96%;
        height: 100%;
        margin: 0 auto;
        .echart{
            width: 100%;
            height: 100%;
        }
    }
</style>
